<template>
    <div class="toast">
        <i class="iconfont " :class="type === 'warning'? 'icon-toast-jinggao':(type === 'success'?'icon-toast_chenggong':'icon-toast-shibai_huaban')"></i>
         <span>{{msg}}</span>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data () {
        return {
            

        }
    },
    computed:{
        ...mapState({
            msg:state=>state.handleToast.msg,
            type:state=>state.handleToast.type
        })
    }
}
</script>

<style lang = "less" scoped>

    .toast{
        position:fixed;
        left: 50%;
        top: 0;
        transform: translateX(-50%);
        background-color: #fff;
        font-size: 18px;
        box-shadow: 0 0 5px #fff;
        padding: 10px 15px;
        border-radius: 5px;
        margin-top: 10px;
        font-weight: 100;
        span{
            padding-left: 5px ;
        }
        .icon-toast-jinggao{
            color: gold;
        }
        .icon-toast_chenggong{
            color: forestgreen;
        }
        .icon-toast-shibai_huaban{
            color: red
        }
    }
</style>